<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="position: static;border:solid black;right: 100px">静态定位</div>
<div style="position: fixed;top:100px;right: 100px">固定定位 </div>
<div>相对定位1</div>
<div style="position: relative;left:-20px;top: 20px">相对定位2</div>
<div  style="position: relative;left:20px">相对定位3</div>
<div>绝对定位1</div>
<div style="position: absolute;left: 100px">绝对定位2</div>
<div style="position: absolute;top:200px">绝对定位3</div>
<div>绝对定位4</div>
<div>黏贴定位1</div>
<div style="position:sticky ;left :10px;top:10px;right: 10px;bottom: 10px;background-color: green">黏贴定位2</div>
<div style="position: sticky;top: 50px ;background-color: red">黏贴定位3</div>
<div>黏贴定位4</div>
<div style="z-index: 2; position: absolute;top:100px; width: 100px;height: 100px;background-color: green">堆叠顺序1</div>
<div style="z-index: 1; position: absolute;top:100px; width: 100px;height: 100px;background-color: yellow">堆叠顺序2</div>
<div>堆叠顺序3</div>
<div>堆叠顺序4</div>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</body>
</html>
